import React, { useState } from 'react';
import { Button, Modal, Form, Input, Badge, message, Select, InputNumber, DatePicker, Space } from "antd";
import { PlusOutlined } from '@ant-design/icons';
import { add } from '../../services/order';
import { getAll } from '../../services/user';
import { getShot } from '../../services/shot';
const { Option } = Select;
const { RangePicker } = DatePicker;

export default function Add() {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [form] = Form.useForm();
    const [users, setUsers] = useState([]);
    const [user, setUser] = useState();
    const [startTime, setStartTime] = useState();
    const [finishTime, setFinishTime] = useState();
    const [status, setStatus] = useState();
    const [items, setItems] = useState([]);

    const handleVisible = async () => {
        let userData = await getAll();
        let shotData = await getShot();
        setItems(shotData.data);
        setUsers(userData.data.rows);
        setIsModalVisible(true);
    }

    const handleOk = () => {
        setIsModalVisible(false);
    }

    const handleCancel = () => {
        setIsModalVisible(false);
    }

    return (
        <div>
            <Button type="primary" onClick={handleVisible}>
                增加
            </Button>
            <Modal
                title="增加订单"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
            >
                <Form
                    name="addForm"
                    form={form}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 20,
                    }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="下单用户"
                        name="user"
                        required={true}
                    >
                        <Select
                            showSearch
                            style={{
                                width: '100%',
                            }}
                            placeholder="搜索或选择用户"
                            optionFilterProp="children"
                            filterOption={(input, option) => option.children.includes(input)}
                            filterSort={(optionA, optionB) =>
                                optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
                            }
                            onChange={(value) => setUser(value)}
                        >
                            {
                                users.map((item) => <Option value={item._id} key={item._id}>{item.nickname}</Option>)
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="下单时间"
                        name="startTime"
                        required={true}
                    >
                        <DatePicker showTime placeholder='下单时间'
                            style={{ width: '100%' }}
                            onChange={(value, date) => setStartTime(date)} />
                    </Form.Item>
                    <Form.Item
                        label="完成时间"
                        name="finishTime"
                        required={true}
                    >
                        <DatePicker showTime placeholder='完成时间'
                            style={{ width: '100%' }}
                            onChange={(value, date) => setFinishTime(date)} />
                    </Form.Item>
                    <Form.Item
                        label="订单状态"
                        name="status"
                        required={true}
                    >
                        <Select
                            defaultValue="1"
                            style={{
                                width: 120,
                            }}
                            onChange={(value) => setStatus(value)}
                        >
                            <Option value="1"><Badge status="error" />待支付</Option>
                            <Option value="2"><Badge status="processing" />已支付</Option>
                            <Option value="3"><Badge status="processing" />正在运送</Option>
                            <Option value="4"><Badge status="success" />已完成</Option>
                            <Option value="5"><Badge status="default" />已取消</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="商品信息"
                        name="itemInfo"
                        required={true}
                    >
                        <Select
                            style={{
                                width: '100%',
                            }}
                        >
                            {
                                items.map((item) => <Option value={item._id}>{item._id}</Option>)
                            }
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </div >
    )
}
